<template>
	<view>
		<view class="list-item" style="padding: 40upx 40upx 20upx;">
			<text style="color: #333333;font-size: 32upx;font-weight: bold;margin-bottom: 20upx;">输入卡号添加</text>

			<view style="display: flex;">

				<u-upload :fileList="bankurl0" @afterRead="afterRead0" @delete="deletePic0" maxCount="1" width="150"
					multiple height="91">
					<image src="/pagesB/static/bank0.png" mode="scaleToFill" style="width: 150px;height: 91px;">
					</image>
				</u-upload>


				<u-upload :fileList="bankurl1" @afterRead="afterRead1" @delete="deletePic1" maxCount="1" width="150"
					multiple height="91" :customStyle="{'margin-left':'20upx'}">
					<image src="/pagesB/static/bank1.png" mode="scaleToFill" style="width: 150px;height: 91px;">
					</image>
				</u-upload>


			</view>

			<view class="input-wrap">
				<text>卡号</text>
				<u-input v-model="carno" type="number" inputAlign="right" placeholder="请输入卡号" border="none" clearable
					maxlength="19" @blur="focuschange(false)" @focus="focuschange(true)">
				</u-input>
			</view>

			<u-line color="#efefef"></u-line>

			<view class="input-wrap">
				<text>持卡人姓名</text>
				<u-input v-model="name" type="text" inputAlign="right" placeholder="请输入持卡人姓名" border="none" clearable
					maxlength="6">
				</u-input>
			</view>

			<u-line color="#efefef"></u-line>

			<view class="input-wrap">
				<text>身份证号</text>
				<u-input v-model="idcard" type="idcard" inputAlign="right" placeholder="请输入持卡人身份证号" border="none"
					clearable maxlength="18">
				</u-input>
			</view>

			<u-line color="#efefef"></u-line>

			<view class="input-wrap" @click="goSelItem">
				<text>开户行</text>

				<u-input v-model="type" inputAlign="right" placeholder="请选择开户行" disabled disabledColor="#FFFFFF" border="none"
					type="select">
				</u-input>

				<u-icon slot="right" name="arrow-right"></u-icon>
			</view>

			<u-line color="#efefef"></u-line>

			<view class="input-wrap">
				<text>手机号</text>

				<u-input v-model="phone" type="number" inputAlign="right" placeholder="请输入手机号" border="none" clearable
					maxlength="11">
				</u-input>
			</view>

		</view>

		<view style="margin-left: 65upx;">
			<text style="font-size: 28upx;color: #333333;">我已阅读并同意签署</text>
			<text style="font-size: 28upx;color: #12B9A3;" @click="showxieyi = true">《服务协议》</text>
		</view>


		<text class="botom-btn bottom" @click="next">下一步</text>

		<u-modal title="输入短信验证码" :show="showPop" showCancelButton closeOnClickOverlay confirmColor="#12B9A3"
			@confirm="confirm" @cancel="() => showPop = false">

			<view class="pop-content">

				<text style="color: #A7A7A7;font-size: 26upx;" v-if="sendMsg">验证码已发送至{{phone}}</text>

				<view class="pop-input">
					<u-input v-model="veCode" type="number" placeholder="请输入短信验证码" border="none"
						maxlength="6">
					</u-input>


					<view style="display: flex;">
						<u-code ref="uCode2" @change="codeChange2" keep-running start-text="点击发送"></u-code>
						<text @tap="getCode2" :text="tips2" class="code-text">{{tips2}}</text>
					</view>

				</view>

			</view>

		</u-modal>

        <!-- 协议弹窗 -->
        <Maskxieyi v-if="showxieyi"
                   @ok="showxieyi=false"></Maskxieyi>

	</view>
</template>

<script>
	import uuid from 'uuid'
	var BIN = require('../../utils/bankcardinfo.js')
	
	import {
		signMsg,
		customerBindCard
	} from '@/api/custom-api.js';
	import {baseImageUrl} from '@/settings.js';
	
	import {upload} from '@/api/user-api.js';
	import Maskxieyi from '@/components/mmv-ui/mask-xieyi.vue'
	
	export default {
		components: {
		    Maskxieyi,
		},
		data() {
			return {
				baseImg: baseImageUrl,
				bankurl0: [],
				bankurl1: [],
				carno: '',
				name: '',
				idcard: '',
				type: '',
				phone: '',
				showPop: false,
				sendMsg: false,
				showxieyi:false,
				veCode: '',
				tips2: '',
				orderNo: '', // 订单号
				customId:'',
			}
		},
		onLoad(op) {
			this.customId = op.customId;
		},
		methods: {
			codeChange2(text) {
				this.tips2 = text;
			},
			
			confirm(){
				if (uni.$u.test.isEmpty(this.veCode)) {
					uni.showToast({
						icon: 'none',
						title: '请输入验证码'
					})
					return false;
				}
				
				var url0 = this.bankurl0[0].url;
				url0 = url0.substring(this.baseImg.length, url0.length)
				
				var url1 = this.bankurl1[0].url;
				url1 = url1.substring(this.baseImg.length, url1.length)
				
				customerBindCard({
					customerId:this.customId,
					orderNo: this.orderNo,
					verificationCode: this.veCode,
					mobileNo: this.phone,
					bankCardNo: this.carno,
					cardImgFront: url0,
					cardImgBack: url1,
					bankDeposit: this.type,
				}).then(res=>{
					this.showPop = false;
					uni.$u.toast('提交成功')
					setTimeout(()=>{
						uni.navigateBack()
					}, 1000)
				})
			},
			
			focuschange(flag){
				console.log('是否获得焦点', flag);
				if(!flag){
					this.goSelItem();
				}
			},

			getCode2() {
				if (this.$refs.uCode2.canGetCode) {
					
					this.orderNo = uuid.v1().slice(0, 32);
					
					uni.showLoading({
						title: '正在获取验证码'
					})

					signMsg({
						orderNo: this.orderNo,
						customerName: this.name,
						idNo: this.idcard,
						bankCardNo: this.carno,
						mobileNo: this.phone
					}).then(res => {
						uni.hideLoading();
						uni.$u.toast('验证码已发送');
						this.$refs.uCode2.start();
					}).catch(e=>{
						uni.hideLoading();
						uni.$u.toast(e);
					})
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}

			},

			goSelItem() {
				/**
				 *  bankCode: "CITIC"
					bankName: "中信银行"
					cardType: "CC"
					cardTypeName: "信用卡"
				 */
				BIN.getBankBin(this.carno).then(res => {
					console.log('成功了', res);

					this.type = res.bankName
				}).catch(e => {
					this.type = ''
					uni.showToast({
						icon: 'none',
						title: e
					})
					console.log('失败了', e);
				})

			},

			next() {
				
				if (uni.$u.test.isEmpty(this.bankurl0)) {
					uni.showToast({
						icon: 'none',
						title: '请上传银行卡正面照'
					})
					return false;
				}

				if (uni.$u.test.isEmpty(this.bankurl1)) {
					uni.showToast({
						icon: 'none',
						title: '请上传银行卡反面照'
					})
					return false;
				}

				if (this.carno.toString().length < 15 || this.carno.toString().length > 19) {
					uni.showToast({
						icon: 'none',
						title: '银行卡位数必须是15到19位'
					})
					return false;
				}

				if (uni.$u.test.isEmpty(this.name)) {
					uni.showToast({
						icon: 'none',
						title: '请输入持卡人姓名'
					})
					return false;
				}

				if (!uni.$u.test.idCard(this.idcard)) {
					uni.showToast({
						icon: 'none',
						title: '请输入正确的身份证号'
					})
					return false;
				}

				if (uni.$u.test.isEmpty(this.type)) {
					uni.showToast({
						icon: 'none',
						title: '请选择开户行'
					})
					return false;
				}

				if (!uni.$u.test.mobile(this.phone)) {
					uni.showToast({
						icon: 'none',
						title: '请输入正确的手机号'
					})
					return false;
				}

				this.showPop = true;
			},

			async afterRead0(event) {
				// console.log(event);
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this.bankurl0.length
				lists.map((item) => {
					this.bankurl0.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].thumb)
					let item = this.bankurl0[fileListLen]
					this.bankurl0.splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},

			async afterRead1(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this.bankurl1.length
				lists.map((item) => {
					this.bankurl1.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].thumb)
					let item = this.bankurl1[fileListLen]
					this.bankurl1.splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},

			deletePic0() {
				this.bankurl0 = []
			},

			deletePic1() {
				this.bankurl1 = []
			},

			uploadFilePromise(url) {
				let that = this
				return new Promise((resolve, reject) => {
					let a = upload({
						name: 'file',
						filePath: url,
					}).then(res => {
						resolve(that.baseImg + res.fileName)
					})
				})
			},


		}
	}
</script>

<style lang="scss" scoped>
	.bank-wrap {
		width: 0;
		flex-grow: 1;
		position: relative;


		.bg {
			width: 100%;
			height: 183upx;
		}

		.bank-content {
			top: 23upx;
			width: 100%;
			height: 100%;
			position: absolute;
			@include flex(column);
			align-items: center;

			.upload {
				width: 80upx;
				height: 80upx;
			}

			text {
				font-size: 26upx;
				color: $black33;
				margin-top: 16upx;
				font-weight: bold;
			}
		}


	}

	.input-wrap {
		@include flex;
		height: 77upx;
		justify-content: space-between;
		align-items: center;
		font-size: 28upx;
		color: $black33;
	}

	.botom-btn {
		display: block;
		height: 98upx;
		line-height: 98upx;
		text-align: center;
		font-size: 32upx;
		color: $white;
		background-color: $green12;
	}

	.bottom {
		width: 100%;
		position: fixed;
		bottom: 0;
		z-index: 2;
	}

	.pop-content {
		@include flex(column);
		align-items: center;

		.pop-input {
			@include flex;
			align-items: center;
			justify-content: space-between;
			margin: 30upx 0 0;


		}
	}

	.code-text {
		color: $green12;
		font-size: 28upx;
	}
</style>
